<div class="container-fluid mt-4">
    <!-- 头部标题 -->
    <div class="card mb-2">
        <!--Card content-->
        <div class="card-body">
            <h6 class="mb-2 mb-sm-0 pt-1" style="text-align: center;">我的视频</h6>
        </div>
    </div>
    <!-- 头部标题-end -->
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg">
            <div class="card mb-2">
                <!--Card content-->
                <div class="card-body">
                    <form>
                        <div class="form-row align-items-center mb-3">
                            <div class="col-auto">
                                <select class="form-control form-control-sm">
                                    <option>请选择课程</option>
                                    <option>java</option>
                                    <option>html</option>
                                    <option>css</option>
                                    <option>javascript</option>
                                </select>
                            </div>
                            <div class="col-auto">
                                <select class="form-control form-control-sm">
                                    <option>请选择状态</option>
                                    <option>待审核</option>
                                    <option>审核未通过</option>
                                    <option>审核通过</option>
                                    <option>视频上架</option>
                                    <option>视频下架</option>
                                </select>
                            </div>
                            <div class="col-auto">
                                <button type="button" class="btn btn-info btn-sm">搜索</button>
                            </div>
                            <div class="col-auto">
                                <button type="button" class="btn btn-primary btn-sm" data-toggle="collapse"
                                    data-target="#vedioupload">添加新视频</button>
                            </div>
                        </div>
                    </form>
                    <div class="collapse mb-4" id="vedioupload">
                        <div class="card card-body">
                            <form>
                                <div class="form-group">
                                    <label for="course">所属学科</label>
                                    <select class="form-control" id="course">
                                        <option>请选择课程</option>
                                        <option>java</option>
                                        <option>html</option>
                                        <option>css</option>
                                        <option>javascript</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="info">课程介绍</label>
                                    <textarea rows="10" class="form-control" id="info"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="info">视频文件</label>
                                    <div class="custom-file">
                                        <input type="file" class="custom-file-input" id="customFile">
                                        <label class="custom-file-label" for="customFile">选择视频</label>
                                    </div>
                                </div>
                                <div class="progress mb-2">
                                    <div class="progress-bar bg-success" role="progressbar" style="width: 0%;">0%</div>
                                </div>
                                <button type="button" class="btn btn-primary btn-sm float-right">提交上传</button>
                            </form>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-align">
                            <thead class="thead-dark">
                                <tr>
                                    <th class="col-min-90">视频编号</th>
                                    <th class="col-min-90">所属学科</th>
                                    <th>视频简介</th>
                                    <th class="col-min-120">课程视频</th>
                                    <th class="col-min-120">视频状态</th>
                                    <th class="col-min-120">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>1</th>
                                    <td>java</td>
                                    <td>
                                        <pre>Java语言支持的变量类型有：<br>类变量：独立于方法之外的变量，用 static 修饰。<br>实例变量：独立于方法之外的变量，不过没有 static 修饰。<br>局部变量：类的方法中的变量。</pre>
                                        <button type="button" class="btn btn-link btn-sm" data-toggle="modal"
                                            data-target="#vedioInfoUpdate">更新</button>
                                    </td>
                                    <th>
                                        <a href="./video/01.mkv" target="_black" class="btn btn-light btn-sm">播放/下载</a>
                                    </th>
                                    <td class="text-primary">待审核</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <th>1</th>
                                    <td>java</td>
                                    <td>
                                        <pre>Java语言支持的变量类型有：<br>类变量：独立于方法之外的变量，用 static 修饰。<br>实例变量：独立于方法之外的变量，不过没有 static 修饰。<br>局部变量：类的方法中的变量。</pre>
                                        <button type="button" class="btn btn-link btn-sm" data-toggle="modal"
                                            data-target="#vedioInfoUpdate">更新</button>
                                    </td>
                                    <th>
                                        <a href="./video/01.mkv" target="_black" class="btn btn-light btn-sm">播放/下载</a>
                                    </th>
                                    <td class="text-danger">审核未通过</td>
                                    <td>
                                        <button type="button" class="btn btn-primary btn-sm">提交审核</button>
                                    </td>
                                </tr>
                                <tr>
                                    <th>1</th>
                                    <td>java</td>
                                    <td>
                                        <pre>Java语言支持的变量类型有：<br>类变量：独立于方法之外的变量，用 static 修饰。<br>实例变量：独立于方法之外的变量，不过没有 static 修饰。<br>局部变量：类的方法中的变量。</pre>
                                        <button type="button" class="btn btn-link btn-sm" data-toggle="modal"
                                            data-target="#vedioInfoUpdate">更新</button>
                                    </td>
                                    <th>
                                        <a href="./video/01.mkv" target="_black" class="btn btn-light btn-sm">播放/下载</a>
                                    </th>
                                    <td class="text-info">审核通过</td>
                                    <td>
                                        <button type="button" class="btn btn-success btn-sm">上架</button>
                                    </td>
                                </tr>
                                <tr>
                                    <th>1</th>
                                    <td>java</td>
                                    <td>
                                        <pre>Java语言支持的变量类型有：<br>类变量：独立于方法之外的变量，用 static 修饰。<br>实例变量：独立于方法之外的变量，不过没有 static 修饰。<br>局部变量：类的方法中的变量。</pre>
                                        <button type="button" class="btn btn-link btn-sm" data-toggle="modal"
                                            data-target="#vedioInfoUpdate">更新</button>
                                    </td>
                                    <th>
                                        <a href="./video/01.mkv" target="_black" class="btn btn-light btn-sm">播放/下载</a>
                                    </th>
                                    <td class="text-success">视频上架</td>
                                    <td>
                                        <button type="button" class="btn btn-warning btn-sm">下架</button>
                                    </td>
                                </tr>
                                <tr>
                                    <th>1</th>
                                    <td>java</td>
                                    <td>
                                        <pre>Java语言支持的变量类型有：<br>类变量：独立于方法之外的变量，用 static 修饰。<br>实例变量：独立于方法之外的变量，不过没有 static 修饰。<br>局部变量：类的方法中的变量。</pre>
                                        <button type="button" class="btn btn-link btn-sm" data-toggle="modal"
                                            data-target="#vedioInfoUpdate">更新</button>
                                    </td>
                                    <th>
                                        <a href="./video/01.mkv" target="_black" class="btn btn-light btn-sm">播放/下载</a>
                                    </th>
                                    <td class="text-warning">视频下架</td>
                                    <td>
                                        <button type="button" class="btn btn-success btn-sm">上架</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 视频简介更新 -->
<div class="modal fade" id="vedioInfoUpdate" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">视频简介更新</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <textarea rows="5" class="form-control" id="info"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">更新</button>
            </div>
        </div>
    </div>
</div>
<!-- 视频简介更新-结束 -->
<script>

</script>